<template>
	<view class="main">
		<view class="title">
			<text class="line"></text> 必做题
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in must" @click="practice(item)">
				<text class="round">{{index+1}}</text>{{item.b_class}}
			</view>
		</view>
		<view class="title blur">
			<text class="line"></text> 选做题
		</view>
		<view class="list blur">
			<view class="item" v-for="(item,index) in normal" @click="practice(item)">
				<text class="round">{{index+1}}</text>{{item.b_class}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		vipClassify
	} from "@/api/index.js"
	export default {
		data() {
			return {
				subjectType: '1',
				must: [],
				normal: []
			};
		},
		mounted() {
			this.subjectType = uni.getStorageSync('vipSubject') || '1'
			vipClassify({
				subject: this.subjectType
			}).then(res => {
				if (res.code == 1) {
					this.must = res.data.must
					this.normal = res.data.normal
				}
			})
		},
		methods: {
			practice(item) {
				if (item.count == 0) {
					uni.showToast({
						title: '该类型暂时没有上传题目',
						icon: "none"
					})
					return
				}
				uni.navigateTo({
					url: "/pages/subject/practiceSub?class=" + item.b_class + "&subjectType=" + this.subjectType +
						"&vip=1&resource=0"
				})
			}
		}
	}
</script>

<style lang="scss">
	.main {
		background: #fff;
		padding: 26rpx;

		.title {
			font-weight: 600;
			font-size: 30rpx;
			color: #333;
			display: flex;
			align-items: center;
			margin-top: 40rpx;

			.line {
				display: inline-block;
				height: 30rpx;
				width: 4rpx;
				background: #EB3A28;
				margin-right: 10rpx;
			}
		}


		.list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;


			.item {
				color: #686868;
				font-size: 28rpx;
				padding: 20rpx 10rpx;
				border-bottom: 1px solid #DCDCDC;
				width: 50%;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				box-sizing: border-box;

				.round {
					display: block;
					width: 40rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					color: #fff;
					font-size: 24rpx;
					background: #E83B2D;
					border-radius: 100%;
					margin-right: 20rpx;
				}
			}
		}

		.blur {
			.line {
				background-color: #4395E9;
			}

			.item {
				.round {
					background-color: #4395E9;
				}
			}
		}

	}
</style>